<template>
  <div>
    <el-row>
      <el-col :span="6">
        <div v-for="o in 4" :key="o" class="text item">
          {{'学生' + o }}
        </div>
      </el-col>
      <el-col :span="18">
        <el-table
          :data="tableData"
          style="width: 100%"
          border>
          <el-table-column
            prop="date"
            align="center"
            label="日期">
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="课程名称">
          </el-table-column>
          <el-table-column
            prop="province"
            align="center"
            label="所在实训室">
          </el-table-column>
          <el-table-column
            prop="city"
            align="center"
            label="面向专业">
          </el-table-column>
          <el-table-column
            prop="address"
            align="center"
            label="班级">
          </el-table-column>
          <el-table-column
            prop="zip"
            align="center"
            label="考核分">
          </el-table-column>
          <el-table-column
            align="center"
            label="操作">
            <template slot-scope="scope">
              <el-button @click="dialogFormVisible = true" type="text" size="small">评分</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          style="margin-top: 10px;text-align: right"
          layout="prev, pager, next"
          :total="1000">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="评价打分" :visible.sync="dialogFormVisible" width="40%">
      <el-form :model="form">
        <el-form-item label="考勤分" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="实训分" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="操作分" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="考核分" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "gradeManagement",
    data() {
      return {
        dialogFormVisible: false,
        formLabelWidth: "120px",
        form:{},
        tableData: [{
        date: '2016-05-02',
        name: '课程1',
        province: '陕西',
        city: '计算机科学与应用',
        address: '陕西省西安市',
        zip: 86
      }, {
        date: '2016-05-04',
        name: '课程1',
        province: '陕西',
        city: '计算机科学与应用',
        address: '陕西省西安市',
        zip: 85
      }, {
        date: '2016-05-01',
        name: '课程1',
        province: '陕西',
        city: '计算机科学与应用',
        address: '陕西省西安市',
        zip: 88
      }, {
        date: '2016-05-03',
        name: '课程1',
        province: '陕西',
        city: '计算机科学与应用',
        address: '陕西省西安市',
        zip: 80
      }],
      }
    }
  }
</script>

<style scoped>

</style>
